<template>
  <div class="exhibitor-detail">
    <div class="page-header">
      <div class="container">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="$router.push('/exhibitors')"
              >展商中心</el-breadcrumb-item
            >
            <el-breadcrumb-item @click="$router.push('/exhibitors-directory')"
              >展品商城</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{
              exhibitor?.name || "展商详情"
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="container" v-if="exhibitor">
      <!-- 展商基本信息 -->
      <section class="exhibitor-info-section">
        <div class="exhibitor-header">
          <div class="exhibitor-logo">
            <img :src="exhibitor.logo" :alt="exhibitor.name" />
          </div>
          <div class="exhibitor-basic">
            <h1 class="exhibitor-name">{{ exhibitor.name }}</h1>
            <div class="exhibitor-tags">
              <el-tag type="primary">{{ exhibitor.category }}</el-tag>
              <el-tag v-if="exhibitor.featured" type="warning">重点展商</el-tag>
              <el-tag type="info">{{ exhibitor.country }}</el-tag>
            </div>
            <p class="exhibitor-slogan">{{ exhibitor.slogan }}</p>
            <div class="exhibitor-stats">
              <div class="stat-item">
                <span class="stat-number">{{ exhibitor.establishedYear }}</span>
                <span class="stat-label">成立年份</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ exhibitor.employeeCount }}+</span>
                <span class="stat-label">员工人数</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ exhibitor.boothArea }}㎡</span>
                <span class="stat-label">展位面积</span>
              </div>
            </div>
          </div>
          <div class="exhibitor-actions">
            <el-button type="primary" size="large" @click="contactExhibitor">
              <el-icon><Message /></el-icon>
              联系展商
            </el-button>
            <el-button size="large" @click="collectExhibitor">
              <el-icon><Star /></el-icon>
              收藏
            </el-button>
            <el-button size="large" @click="shareExhibitor">
              <el-icon><Share /></el-icon>
              分享
            </el-button>
          </div>
        </div>
      </section>

      <!-- 详细信息标签页 -->
      <section class="exhibitor-details-section">
        <el-tabs v-model="activeTab" class="exhibitor-tabs">
          <!-- 公司简介 -->
          <el-tab-pane label="公司简介" name="company">
            <div class="tab-content">
              <div class="company-intro">
                <h3>公司介绍</h3>
                <div class="intro-content">
                  <p>{{ exhibitor.description }}</p>
                  <div class="company-highlights">
                    <h4>企业亮点</h4>
                    <ul>
                      <li
                        v-for="highlight in exhibitor.highlights"
                        :key="highlight"
                      >
                        {{ highlight }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="company-info">
                <h3>基本信息</h3>
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="公司全称">{{
                    exhibitor.fullName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="成立时间"
                    >{{ exhibitor.establishedYear }}年</el-descriptions-item
                  >
                  <el-descriptions-item label="注册地址">{{
                    exhibitor.address
                  }}</el-descriptions-item>
                  <el-descriptions-item label="员工规模"
                    >{{ exhibitor.employeeCount }}+ 人</el-descriptions-item
                  >
                  <el-descriptions-item label="主营业务">{{
                    exhibitor.business
                  }}</el-descriptions-item>
                  <el-descriptions-item label="年营业额">{{
                    exhibitor.revenue
                  }}</el-descriptions-item>
                  <el-descriptions-item label="官方网站">
                    <a
                      :href="exhibitor.website"
                      target="_blank"
                      class="website-link"
                    >
                      {{ exhibitor.website }}
                    </a>
                  </el-descriptions-item>
                  <el-descriptions-item label="展位号">{{
                    exhibitor.boothNumber
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-tab-pane>

          <!-- 产品展示 -->
          <el-tab-pane label="产品展示" name="products">
            <div class="tab-content">
              <div class="products-grid">
                <div
                  class="product-card"
                  v-for="product in exhibitor.products"
                  :key="product.id"
                >
                  <div class="product-image">
                    <img :src="product.image" :alt="product.name" />
                    <div class="product-overlay">
                      <el-button
                        type="primary"
                        size="small"
                        @click="viewProduct(product)"
                      >
                        查看详情
                      </el-button>
                    </div>
                  </div>
                  <div class="product-info">
                    <h4>{{ product.name }}</h4>
                    <p>{{ product.description }}</p>
                    <div class="product-specs">
                      <span
                        v-for="spec in product.specifications"
                        :key="spec"
                        class="spec-tag"
                      >
                        {{ spec }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 新闻动态 -->
          <el-tab-pane label="新闻动态" name="news">
            <div class="tab-content">
              <div class="news-list">
                <div
                  class="news-item"
                  v-for="news in exhibitor.news"
                  :key="news.id"
                >
                  <div class="news-image">
                    <img :src="news.image" :alt="news.title" />
                  </div>
                  <div class="news-content">
                    <h4>{{ news.title }}</h4>
                    <p class="news-summary">{{ news.summary }}</p>
                    <div class="news-meta">
                      <span class="news-date">{{ news.date }}</span>
                      <span class="news-category">{{ news.category }}</span>
                    </div>
                    <el-button type="text" @click="viewNews(news)"
                      >阅读全文</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 联系方式 -->
          <el-tab-pane label="联系方式" name="contact">
            <div class="tab-content">
              <div class="contact-info">
                <div class="contact-section">
                  <h3>展会联系人</h3>
                  <div class="contact-cards">
                    <div
                      class="contact-card"
                      v-for="contact in exhibitor.contacts"
                      :key="contact.id"
                    >
                      <div class="contact-avatar">
                        <img :src="contact.avatar" :alt="contact.name" />
                      </div>
                      <div class="contact-details">
                        <h4>{{ contact.name }}</h4>
                        <p class="contact-position">{{ contact.position }}</p>
                        <div class="contact-methods">
                          <div class="contact-item">
                            <el-icon><Phone /></el-icon>
                            <span>{{ contact.phone }}</span>
                          </div>
                          <div class="contact-item">
                            <el-icon><Message /></el-icon>
                            <span>{{ contact.email }}</span>
                          </div>
                          <div class="contact-item" v-if="contact.wechat">
                            <el-icon><ChatDotRound /></el-icon>
                            <span>{{ contact.wechat }}</span>
                          </div>
                        </div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="contactPerson(contact)"
                        >
                          立即联系
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="contact-section">
                  <h3>展位信息</h3>
                  <div class="booth-info">
                    <div class="booth-details">
                      <el-descriptions :column="1" border>
                        <el-descriptions-item label="展位号">{{
                          exhibitor.boothNumber
                        }}</el-descriptions-item>
                        <el-descriptions-item label="展位面积"
                          >{{ exhibitor.boothArea }}㎡</el-descriptions-item
                        >
                        <el-descriptions-item label="展位类型">{{
                          exhibitor.boothType
                        }}</el-descriptions-item>
                        <el-descriptions-item label="所在展馆">{{
                          exhibitor.hallName
                        }}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                    <div class="booth-map">
                      <img :src="exhibitor.boothMap" alt="展位位置图" />
                      <p>展位位置图</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </section>

      <!-- 相关展商推荐 -->
      <section class="related-exhibitors-section">
        <h2 class="section-title">相关展商推荐</h2>
        <div class="related-exhibitors">
          <div
            class="exhibitor-card"
            v-for="related in relatedExhibitors"
            :key="related.id"
          >
            <div class="exhibitor-logo">
              <img :src="related.logo" :alt="related.name" />
            </div>
            <div class="exhibitor-info">
              <h4>{{ related.name }}</h4>
              <p>{{ related.category }}</p>
              <el-button type="text" @click="viewExhibitor(related.id)"
                >查看详情</el-button
              >
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-empty description="展商信息加载中...">
        <el-button type="primary" @click="loadExhibitor">重新加载</el-button>
      </el-empty>
    </div>

    <!-- 联系对话框 -->
    <el-dialog v-model="contactDialogVisible" title="联系展商" width="500px">
      <el-form :model="contactForm" label-width="80px">
        <el-form-item label="您的姓名">
          <el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input
            v-model="contactForm.company"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="contactForm.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input v-model="contactForm.email" placeholder="请输入邮箱地址" />
        </el-form-item>
        <el-form-item label="留言内容">
          <el-input
            v-model="contactForm.message"
            type="textarea"
            :rows="4"
            placeholder="请输入您想了解的产品或服务..."
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="contactDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitContact">发送</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Message,
  Star,
  Share,
  Phone,
  ChatDotRound,
} from "@element-plus/icons-vue";

export default {
  name: "ExhibitorDetail",
  setup() {
    const route = useRoute();
    const router = useRouter();

    const exhibitor = ref(null);
    const activeTab = ref("company");
    const contactDialogVisible = ref(false);
    const relatedExhibitors = ref([]);

    const contactForm = reactive({
      name: "",
      company: "",
      phone: "",
      email: "",
      message: "",
    });

    // 模拟展商详细数据
    const mockExhibitor = {
      id: 1,
      name: "深圳市优必选科技股份有限公司",
      fullName: "深圳市优必选科技股份有限公司",
      slogan: "让智能机器人走进千家万户",
      category: "服务机器人",
      country: "中国",
      featured: true,
      logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=200&h=200&fit=crop",
      establishedYear: 2012,
      employeeCount: 2000,
      boothArea: 180,
      boothNumber: "A1-001",
      boothType: "标准展位",
      hallName: "A馆",
      boothMap:
        "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=300&h=200&fit=crop",
      address: "深圳市南山区留仙大道4068号南山智园崇文园区",
      business: "智能机器人研发、生产、销售",
      revenue: "50亿元",
      website: "https://www.ubtech.com",
      description:
        "优必选科技成立于2012年，是全球领先的人工智能和人形机器人企业。公司致力于智能机器人的研发、生产和销售，产品涵盖消费级人形机器人、商用服务机器人、STEM教育智能编程机器人等多个领域。",
      highlights: [
        "全球领先的人形机器人企业",
        "拥有完整的人工智能和机器人核心技术",
        "产品销往全球40多个国家和地区",
        "获得多项国际机器人大赛冠军",
        "与全球知名企业建立战略合作关系",
      ],
      products: [
        {
          id: 1,
          name: "Walker X",
          description: "大型仿人服务机器人，具备自主导航、语音交互等功能",
          image:
            "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=300&h=200&fit=crop",
          specifications: ["身高1.45m", "41个关节", "视觉识别", "语音交互"],
        },
        {
          id: 2,
          name: "Cruzr",
          description: "商用服务机器人，适用于零售、酒店、医院等场景",
          image:
            "https://images.unsplash.com/photo-1546776310-eef45dd6d63c?w=300&h=200&fit=crop",
          specifications: ["身高1.2m", "移动底盘", "触摸屏", "人脸识别"],
        },
        {
          id: 3,
          name: "Alpha Mini",
          description: "智能编程教育机器人，寓教于乐的STEM教育产品",
          image:
            "https://images.unsplash.com/photo-1561557944-6e7860d1a7eb?w=300&h=200&fit=crop",
          specifications: ["身高24cm", "编程教育", "语音控制", "APP互动"],
        },
      ],
      news: [
        {
          id: 1,
          title: "优必选发布新一代人形机器人Walker X",
          summary:
            "在2024年CES展会上，优必选科技发布了新一代大型仿人服务机器人Walker X，展示了在人工智能和机器人技术方面的最新突破。",
          image:
            "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=300&h=200&fit=crop",
          date: "2024-01-15",
          category: "产品发布",
        },
        {
          id: 2,
          title: "优必选与华为签署战略合作协议",
          summary:
            "双方将在5G、云计算、人工智能等领域深度合作，共同推动智能机器人产业发展。",
          image:
            "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=300&h=200&fit=crop",
          date: "2024-02-20",
          category: "合作动态",
        },
      ],
      contacts: [
        {
          id: 1,
          name: "张经理",
          position: "销售总监",
          phone: "13800138001",
          email: "zhang@ubtech.com",
          wechat: "zhang_ubtech",
          avatar:
            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop",
        },
        {
          id: 2,
          name: "李工程师",
          position: "技术支持",
          phone: "13800138002",
          email: "li@ubtech.com",
          wechat: "li_tech",
          avatar:
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",
        },
      ],
    };

    // 相关展商数据
    const mockRelatedExhibitors = [
      {
        id: 2,
        name: "大疆创新科技",
        category: "无人机",
        logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
      },
      {
        id: 3,
        name: "科沃斯机器人",
        category: "服务机器人",
        logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
      },
      {
        id: 4,
        name: "云迹科技",
        category: "商用机器人",
        logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
      },
    ];

    // 加载展商信息
    const loadExhibitor = () => {
      const exhibitorId = route.params.id || route.query.id;
      console.log("Loading exhibitor:", exhibitorId);

      // 模拟API调用
      setTimeout(() => {
        exhibitor.value = mockExhibitor;
        relatedExhibitors.value = mockRelatedExhibitors;
      }, 500);
    };

    // 联系展商
    const contactExhibitor = () => {
      contactDialogVisible.value = true;
    };

    // 收藏展商
    const collectExhibitor = () => {
      ElMessage.success("已收藏该展商");
    };

    // 分享展商
    const shareExhibitor = () => {
      ElMessage.success("分享链接已复制到剪贴板");
    };

    // 查看产品详情
    const viewProduct = (product) => {
      ElMessage.info(`查看产品：${product.name}`);
    };

    // 查看新闻详情
    const viewNews = (news) => {
      ElMessage.info(`查看新闻：${news.title}`);
    };

    // 联系具体联系人
    const contactPerson = (contact) => {
      contactForm.message = `您好，我对贵公司的产品很感兴趣，希望了解更多信息。`;
      contactDialogVisible.value = true;
    };

    // 查看其他展商
    const viewExhibitor = (id) => {
      router.push(`/exhibitor-detail?id=${id}`);
    };

    // 提交联系表单
    const submitContact = () => {
      if (!contactForm.name || !contactForm.phone) {
        ElMessage.warning("请填写姓名和联系电话");
        return;
      }

      console.log("联系表单:", contactForm);
      ElMessage.success("联系信息已发送，展商会尽快与您联系");
      contactDialogVisible.value = false;

      // 重置表单
      Object.assign(contactForm, {
        name: "",
        company: "",
        phone: "",
        email: "",
        message: "",
      });
    };

    onMounted(() => {
      loadExhibitor();
    });

    return {
      exhibitor,
      activeTab,
      contactDialogVisible,
      contactForm,
      relatedExhibitors,
      loadExhibitor,
      contactExhibitor,
      collectExhibitor,
      shareExhibitor,
      viewProduct,
      viewNews,
      contactPerson,
      viewExhibitor,
      submitContact,
    };
  },
};
</script>

<style scoped>
.exhibitor-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
}

.page-header {
  height: 400px;
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.breadcrumb {
  color: white;
}

.breadcrumb :deep(.el-breadcrumb__inner) {
  color: white;
  cursor: pointer;
}

.breadcrumb :deep(.el-breadcrumb__inner:hover) {
  color: #ff6b35;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 展商基本信息 */
.exhibitor-info-section {
  padding: 40px 0;
}

.exhibitor-header {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 30px;
  align-items: start;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.exhibitor-logo img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.exhibitor-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: white;
}

.exhibitor-tags {
  margin-bottom: 15px;
}

.exhibitor-tags .el-tag {
  margin-right: 10px;
  margin-bottom: 5px;
}

.exhibitor-slogan {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 20px;
  font-style: italic;
}

.exhibitor-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff6b35;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.exhibitor-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exhibitor-actions .el-button {
  width: 120px;
}

/* 详细信息标签页 */
.exhibitor-details-section {
  padding: 40px 0;
}

.exhibitor-tabs {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tab-content {
  padding: 20px 0;
}

/* 公司简介标签页 */
.company-intro {
  margin-bottom: 30px;
}

.company-intro h3,
.company-info h3 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ff6b35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.intro-content p {
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 1rem;
}

.company-highlights h4 {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: white;
}

.company-highlights ul {
  list-style: none;
  padding: 0;
}

.company-highlights li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}

.company-highlights li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ff6b35;
  font-weight: bold;
}

.website-link {
  color: #ff6b35;
  text-decoration: none;
}

.website-link:hover {
  text-decoration: underline;
}

/* 产品展示标签页 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.product-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
  opacity: 1;
}

.product-info {
  padding: 20px;
}

.product-info h4 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-info p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 15px;
  line-height: 1.5;
}

.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.spec-tag {
  background: rgba(255, 107, 53, 0.2);
  color: #ff6b35;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 107, 53, 0.3);
}

/* 新闻动态标签页 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.news-image {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  padding: 20px;
  flex: 1;
}

.news-content h4 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.news-summary {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 15px;
}

.news-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  opacity: 0.8;
}

.news-category {
  color: #ff6b35;
}

/* 联系方式标签页 */
.contact-section {
  margin-bottom: 40px;
}

.contact-section h3 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ff6b35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.contact-card {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-avatar {
  margin-right: 20px;
}

.contact-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-details h4 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.contact-position {
  color: #ff6b35;
  margin-bottom: 15px;
  font-size: 0.9rem;
}

.contact-methods {
  margin-bottom: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.contact-item .el-icon {
  margin-right: 8px;
  color: #ff6b35;
}

.booth-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: start;
}

.booth-map {
  text-align: center;
}

.booth-map img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.booth-map p {
  margin-top: 10px;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 相关展商推荐 */
.related-exhibitors-section {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  color: white;
}

.related-exhibitors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.exhibitor-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.exhibitor-card:hover {
  transform: translateY(-3px);
}

.exhibitor-card .exhibitor-logo {
  margin-right: 15px;
}

.exhibitor-card .exhibitor-logo img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.exhibitor-card .exhibitor-info h4 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.exhibitor-card .exhibitor-info p {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 10px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .exhibitor-header {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .exhibitor-stats {
    justify-content: center;
  }

  .exhibitor-actions {
    flex-direction: row;
    justify-content: center;
  }

  .booth-info {
    grid-template-columns: 1fr;
  }

  .news-item {
    flex-direction: column;
  }

  .news-image {
    width: 100%;
    height: 200px;
  }
}

/* Element Plus 组件样式覆盖 */
.exhibitor-detail :deep(.el-tabs__header) {
  background: transparent;
}

.exhibitor-detail :deep(.el-tabs__nav-wrap::after) {
  background: rgba(255, 255, 255, 0.2);
}

.exhibitor-detail :deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.exhibitor-detail :deep(.el-tabs__item.is-active) {
  color: #ff6b35;
}

.exhibitor-detail :deep(.el-tabs__active-bar) {
  background: #ff6b35;
}

.exhibitor-detail :deep(.el-descriptions__label) {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}

.exhibitor-detail :deep(.el-descriptions__content) {
  color: white !important;
}

.exhibitor-detail :deep(.el-descriptions__table) {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.exhibitor-detail :deep(.el-descriptions__cell) {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.exhibitor-detail :deep(.el-form-item__label) {
  color: white !important;
}

.exhibitor-detail :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.exhibitor-detail :deep(.el-input__inner) {
  color: white !important;
}

.exhibitor-detail :deep(.el-textarea__inner) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}
</style>
